<template>
    <div class="main">
        <Content>
            <template #content>
                <div class="b-w p-20-30 box">
                    <el-row class="dispaly-between">
                        <!-- <el-col :span="6">
                            <div class="cate">
                                <div :class="{ 'active': state.current == index }" class="item pointer"
                                    @click="clickCate(item, index)" v-for="(item, index) in state.cateList"
                                    :key="index">{{ item.name }}
                                </div>
                            </div>
                        </el-col> -->
                        <el-col :span="24">
                            <!-- <div class="title">{{ state.cateItem.name ? state.cateItem.name : state.cateList[0].name
                                }}
                            </div> -->
                            <div class="list">
                                <div v-if="!state.dataLlist.length" class="empty dispaly-col-center">
                                    <el-empty description="暂无数据" :image-size="200" />
                                </div>
                                <div class="person-list ">
                                    <div @click="skipDetail(item)" class="person-item pointer "
                                        v-for="(item, index) in state.dataLlist" :key="index">
                                        <div class="avatar">
                                            <img :src="item.img">
                                        </div>
                                        <div class="desc dispaly-col-center">
                                            <div class="desc-item over-1">{{ item.name }} </div>
                                            <div class="desc-item over-1">{{ item.address }} </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </el-col>
                    </el-row>
                    <div class="page">
                        <el-pagination @current-change="pageChange" layout="prev, pager, next" :total="state.total" />
                    </div>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAncestralHall } from '@/api/index/index'
import { useIndexPopStore } from '@/store/modules/indexPop'
import { ElMessage } from 'element-plus'

const indexPopStore = useIndexPopStore()

const state = reactive({
    cateList: [
        { name: '某某堂号1', id: 1 },
        { name: '某某堂号3', id: 1 },
        { name: '某某堂号2', id: 1 },
    ],
    dataLlist: [],
    current: 0,
    cateItem: {},
    queryData: {
        pageNum: 1,
        pageSize: 10,
        limit: 10
    },
    total: 0
})

// 跳转详情
const router = useRouter()
const skipDetail = (item) => {
    let data = JSON.stringify({
        id: item.id, desc: item.introduce, name: item.name, img: item.img
    })
    router.push({
        path: '/selectPayTribute',
        query: { data }
    })
}

const getListData = async () => {
    if (localStorage.getItem('token')) {
        const res = await getAncestralHall(state.queryData)
        if (res.code == 200) {
            state.total = res.total
            state.dataLlist = res.rows
        }
    } else {
        indexPopStore.isShowPop = true
        ElMessage({
            message: '请先登录',
            type: 'error',
            plain: true
        })
        return
    }

}

// 分页
const pageChange = (page) => {
    state.queryData.pageNum = page
    getListData()
}

onMounted(() => {
    getListData()
})
</script>

<style lang="scss" scoped>
.active {
    background-color: $primary-color !important;
    color: #fff !important;

}

.main {

    .banner {
        width: 100%;
        height: 300px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .box {
        position: relative;
        max-height: $c-height;
        min-height: $c-height;

        .cate {
            overflow-y: scroll;
            max-height: $c-height;
            min-height: $c-height;

            .item:last-child {
                margin-bottom: 0;
            }

            .item:hover {
                color: $primary-color;
            }

            .item {
                padding: 20px 10px;
                background-color: #ece7dc;
                color: #333;
                font-family: MicrosoftYaHei;
                font-size: 22px;
                margin-top: 8px;
            }
        }

        .title {
            font-family: MicrosoftYaHei;
            font-size: 20px;
            color: #000001;
            border-bottom: 2px solid #EDE7DB;
            padding-bottom: 15px;
            margin-left: 40px;
            margin-bottom: 20px;
        }

        .list {
            margin-left: 40px;
            max-height: 800px;
            min-height: 800px;
            overflow-y: scroll;

            .empty {
                min-height: 800px;
            }

            .person-list {
                display: flex;
                flex-wrap: wrap;

                // .person-item:nth-of-type(3n + 0) {
                //     margin-right: 0;
                // }

                .person-item {
                    margin: 0 30px 15px 0px;

                    .avatar {
                        img {
                            width: 200px;
                            height: 286px;
                            border-radius: 5px;
                        }
                    }

                    .desc {
                        background: #EDE7DB;
                        border-radius: 5px;
                        padding: 8px 0;
                        max-width: 200px;

                        .desc-item:hover {
                            color: $primary-color;
                        }

                        .desc-item {
                            font-family: MicrosoftYaHei;
                            font-size: 16px;
                            color: #333333;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .page {
            display: flex;
            justify-content: flex-end;
            position: absolute;
            right: 0;
            bottom: $bto;
        }
    }
}

:deep(.is-active) {
    background-color: $primary-color !important;
    border-radius: 50% !important;
    color: #fff !important;
}
</style>